<template>
  <div>
    <h3>测试过滤器组件</h3>
    <p>username: {{username | gsh(222,'333字符串')}}</p>
    <p>当前时间: {{nowTime}}</p>
    <p>dayjs处理后的当前时间: {{nowTime | gsh}}</p>
    <p>dayjs处理后的当前时间: {{nowTime | gsh('YYYY年MM月DD日 HH-mm-ss')}}</p>

    <p>测试qie过滤器： {{'12345' | qie}}</p>
    <p>测试qie过滤器： {{'12345' | qie(2)}}</p>
    <h3>组合使用</h3>
    <p>当前年份: {{nowTime | gsh | qie}}</p>
    <p><button @click="getNowTime">获取当前时间</button></p>
  </div>
</template>

<script>
/**
 *  过滤器：
 *  1. 什么过滤器：过滤器的本质就是一个函数。 
 *      （1）定义在哪里？ 配置项 filters中
 *      （2）什么时候调用？  {{数据 | 过滤器}} 在管道符后面
 *       (3) 有没有参数: 过滤器的第一个参数，是管道符前面的数据。后面的参数是 过滤器调用时传递实参
 *      （4）返回值: 返回值会替换掉，使用过滤器的插值语法部分
 *      （5）this指向：undefined 
 *            - 为什么？为什么不让过滤器中的this指向当前组件的实例呢？===> 设计者不希望顾虑器用vc上的其他属性和方
 *  法  
 *            - 只能处理管道符前面的数据。
 * 
 * 
 *  需求：格式化时间  dayjs  安装 npm i dayjs
 * 
 *  作用：对插值语法要展示的数据，进行现场加工
 * 
 *  跟函数的区别： 过滤器 管道符可以有多个，数据可以经过过个过滤器处理
 * 
 *  
 *
 */
import dayjs from 'dayjs'
export default {
  name: 'TestFilter',
  data(){
    return {
        username:'atguigu',
        nowTime:1677552955142 
    }
  },
  methods:{
    getNowTime(){
        console.log(Date.now()) // 当前时间的时间戳==> 1970年1月1号到当前时间的毫秒数据

        console.log(dayjs(this.nowTime).format('YYYY-MM-DD HH:mm:ss'))
    }
  },
  filters: {
    // gsh(a,b,c){
    //     console.log('filters gsh run!', a, b, c)
    //     return '666'
    // }
    gsh(nowTime,timeStyle='YYYY-MM-DD HH:mm:ss'){
        console.log('filter this : ', this)
        return dayjs(nowTime).format(timeStyle)
    }
  },
}
</script>

<style>
</style>